<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.4.1/dist/css/bootstrap.css">
    <script type="text/javascript" src="jquery/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="jquery/http.js"></script>

    <script type="text/javascript">
        function deleteSysUser(id) {
            console.log("异步删除:", id)
        }
        $(function () {
            $("#sysUserCheckFlag").change(function () {
                // 1.获取当前的状态值
                var val = $(this).prop("checked");

                // 2.获取需要被选中的元素
                $(".sysUserCheck").each(function () {
                    $(this).prop("checked", val);
                })
            });

            $("#sysUserBatchDel").click(function () {
                var array = new Array();
                // 获取用户勾选的数据
                $(".sysUserCheck:checked").each(function () {
                    // 把数组放到数组中
                    array.push($(this).val());
                })

                sendRequest("SystemUserServlet/batchDel", array, function (data) {
                    if (data.code == 200) {
                        location.reload();
                    }
                });

            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <button class="button btn-danger" id="sysUserBatchDel">批量删除</button>
            <table class="table">
                <tr>
                    <th>
                        <input type="checkbox" id="sysUserCheckFlag" value="全选">
                    </th>
                    <th>id</th>
                    <th>username</th>
                    <th>sex</th>
                    <th>email</th>
                    <th>birthday</th>
                    <th>操作</th>
                </tr>

                <tr th:each="sysUser:${sysUserList}">
                    <td>
                        <input class="sysUserCheck" type="checkbox" th:value="${sysUser.id}">
                    </td>
                    <td th:text="${sysUser.id}"/>
                    <td th:text="${sysUser.username}"/>
                    <td th:text="${sysUser.sex == 1?'男':'女'}"/>
                    <td th:text="${sysUser.email}"/>
                    <td th:text="${#dates.format(sysUser.birthday,'yyyy-MM-dd')}"/>
                    <td>
                        <a th:href="|SystemUserServlet/systemUserById?id=${sysUser.id}|" role="button" class="button btn-success">编辑</a>&nbsp;
                        <a href="javascript:void(0)" th:onclick="|deleteSysUser(${sysUser.id})|" role="button" class="button btn-danger" >删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>